diff options
Diffstat (limited to 'packages/console/app/src/routes/workspace/[id]/usage')
5 files changed, 1083 insertions, 0 deletions
diff --git a/packages/console/app/src/routes/workspace/[id]/usage/graph-section.module.css b/packages/console/app/src/routes/workspace/[id]/usage/graph-section.module.css new file mode 100644 index 000000000..24b85be74 --- /dev/null +++ b/packages/console/app/src/routes/workspace/[id]/usage/graph-section.module.css @@ -0,0 +1,145 @@ +.root { + [data-component="empty-state"] { + padding: var(--space-20) var(--space-6); + text-align: center; + border: 1px dashed var(--color-border); + border-radius: var(--border-radius-sm); + height: 400px; + display: flex; + align-items: center; + justify-content: center; + + p { + font-size: var(--font-size-sm); + color: var(--color-text-muted); + } + } + + [data-slot="filter-container"] { + margin-bottom: 0; + display: flex; + align-items: center; + gap: var(--space-3); + + [data-component="dropdown"] { + [data-slot="trigger"] { + border: 1px solid var(--color-border); + background-color: var(--color-bg); + padding: var(--space-2) var(--space-3); + border-radius: var(--border-radius-sm); + color: var(--color-text); + font-size: var(--font-size-sm); + line-height: 1.5; + + &:hover { + border-color: var(--color-accent); + } + + &:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: 0 0 0 3px var(--color-accent-alpha); + } + } + + [data-slot="chevron"] { + opacity: 0.6; + } + + [data-slot="dropdown"] { + min-width: 200px; + max-height: 300px; + overflow-y: auto; + padding: var(--space-1); + } + } + } + + [data-slot="month-picker"] { + display: flex; + align-items: center; + background-color: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + padding: 0; + } + + [data-slot="month-button"] { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none !important; + color: var(--color-text); + cursor: pointer; + padding: var(--space-2) var(--space-3); + border-radius: var(--border-radius-xs); + transition: background-color 0.2s; + line-height: 1; + + &:hover { + background-color: var(--color-bg-hover); + } + + svg { + display: block; + width: 16px; + height: 16px; + stroke-width: 2; + } + } + + [data-slot="month-label"] { + font-size: var(--font-size-sm); + font-weight: 500; + color: var(--color-text); + line-height: 1.5; + min-width: 140px; + text-align: center; + white-space: nowrap; + } + + [data-slot="model-item"] { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + cursor: pointer; + transition: background-color 0.2s; + font-size: var(--font-size-sm); + color: var(--color-text); + border: none !important; + background: none; + width: 100%; + text-align: left; + white-space: nowrap; + + &:hover { + background: var(--color-bg-hover); + } + + span { + flex: 1; + user-select: none; + } + } + + [data-slot="chart-container"] { + padding: var(--space-6); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + height: 400px; + } + + @media (max-width: 40rem) { + [data-slot="chart-container"] { + height: 300px; + padding: var(--space-4); + } + + [data-component="empty-state"] { + height: 300px; + } + } +} diff --git a/packages/console/app/src/routes/workspace/[id]/usage/graph-section.tsx b/packages/console/app/src/routes/workspace/[id]/usage/graph-section.tsx new file mode 100644 index 000000000..bb4b4f4cf --- /dev/null +++ b/packages/console/app/src/routes/workspace/[id]/usage/graph-section.tsx @@ -0,0 +1,515 @@ +import { and, Database, eq, gte, inArray, isNull, lt, or, sql, sum } from "@opencode-ai/console-core/drizzle/index.js" +import { UsageTable } from "@opencode-ai/console-core/schema/billing.sql.js" +import { KeyTable } from "@opencode-ai/console-core/schema/key.sql.js" +import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js" +import { AuthTable } from "@opencode-ai/console-core/schema/auth.sql.js" +import { useParams } from "@solidjs/router" +import { createEffect, createMemo, onCleanup, Show, For } from "solid-js" +import { createStore } from "solid-js/store" +import { withActor } from "~/context/auth.withActor" +import { Dropdown } from "~/component/dropdown" +import { IconChevronLeft, IconChevronRight } from "~/component/icon" +import styles from "./graph-section.module.css" +import { + Chart, + BarController, + BarElement, + CategoryScale, + LinearScale, + Tooltip, + Legend, + type ChartConfiguration, +} from "chart.js" +import { useI18n } from "~/context/i18n" + +Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend) + +async function getCosts(workspaceID: string, year: number, month: number) { + "use server" + return withActor(async () => { + const startDate = new Date(year, month, 1) + const endDate = new Date(year, month + 1, 1) + const usageData = await Database.use((tx) => + tx + .select({ + date: sql<string>`DATE(${UsageTable.timeCreated})`, + model: UsageTable.model, + totalCost: sum(UsageTable.cost), + keyId: UsageTable.keyID, + plan: sql<string | null>`JSON_EXTRACT(${UsageTable.enrichment}, '$.plan')`, + }) + .from(UsageTable) + .where( + and( + eq(UsageTable.workspaceID, workspaceID), + gte(UsageTable.timeCreated, startDate), + lt(UsageTable.timeCreated, endDate), + ), + ) + .groupBy( + sql`DATE(${UsageTable.timeCreated})`, + UsageTable.model, + UsageTable.keyID, + sql`JSON_EXTRACT(${UsageTable.enrichment}, '$.plan')`, + ) + .then((x) => + x.map((r) => ({ + ...r, + totalCost: r.totalCost ? parseInt(r.totalCost) : 0, + plan: r.plan as "sub" | "lite" | "byok" | null, + })), + ), + ) + + // Get unique key IDs from usage + const usageKeyIds = new Set(usageData.map((r) => r.keyId).filter((id) => id !== null)) + + // Second query: get all existing keys plus any keys from usage + const keysData = await Database.use((tx) => + tx + .select({ + keyId: KeyTable.id, + keyName: KeyTable.name, + userEmail: AuthTable.subject, + timeDeleted: KeyTable.timeDeleted, + }) + .from(KeyTable) + .innerJoin(UserTable, and(eq(KeyTable.userID, UserTable.id), eq(KeyTable.workspaceID, UserTable.workspaceID))) + .innerJoin(AuthTable, and(eq(UserTable.accountID, AuthTable.accountID), eq(AuthTable.provider, "email"))) + .where( + and( + eq(KeyTable.workspaceID, workspaceID), + usageKeyIds.size > 0 + ? or(inArray(KeyTable.id, Array.from(usageKeyIds)), isNull(KeyTable.timeDeleted)) + : isNull(KeyTable.timeDeleted), + ), + ) + .orderBy(AuthTable.subject, KeyTable.name), + ) + + return { + usage: usageData, + keys: keysData.map((key) => ({ + id: key.keyId, + displayName: `${key.userEmail} - ${key.keyName}`, + deleted: key.timeDeleted !== null, + })), + } + }, workspaceID) +} + +const MODEL_COLORS: Record<string, string> = { + "claude-sonnet-4-5": "#D4745C", + "claude-sonnet-4": "#E8B4A4", + "claude-opus-4": "#C8A098", + "claude-haiku-4-5": "#F0D8D0", + "claude-3-5-haiku": "#F8E8E0", + "gpt-5.1": "#4A90E2", + "gpt-5.1-codex": "#6BA8F0", + "gpt-5": "#7DB8F8", + "gpt-5-codex": "#9FCAFF", + "gpt-5-nano": "#B8D8FF", + "grok-code": "#8B5CF6", + "big-pickle": "#10B981", + "kimi-k2": "#F59E0B", + "qwen3-coder": "#EC4899", + "glm-4.6": "#14B8A6", +} + +function getModelColor(model: string): string { + if (MODEL_COLORS[model]) return MODEL_COLORS[model] + + const hash = model.split("").reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0) + const hue = Math.abs(hash) % 360 + return `hsl(${hue}, 50%, 65%)` +} + +function formatDateLabel(dateStr: string): string { + const date = new Date() + const [y, m, d] = dateStr.split("-").map(Number) + date.setFullYear(y) + date.setMonth(m - 1) + date.setDate(d) + date.setHours(0, 0, 0, 0) + const month = date.toLocaleDateString(undefined, { month: "short" }) + const day = date.getUTCDate().toString().padStart(2, "0") + return `${month} ${day}` +} + +function addOpacityToColor(color: string, opacity: number): string { + if (color.startsWith("#")) { + const r = parseInt(color.slice(1, 3), 16) + const g = parseInt(color.slice(3, 5), 16) + const b = parseInt(color.slice(5, 7), 16) + return `rgba(${r}, ${g}, ${b}, ${opacity})` + } + if (color.startsWith("hsl")) return color.replace(")", `, ${opacity})`).replace("hsl", "hsla") + return color +} + +export function GraphSection() { + let canvasRef: HTMLCanvasElement | undefined + let chartInstance: Chart | undefined + const params = useParams() + const i18n = useI18n() + const now = new Date() + const [store, setStore] = createStore({ + data: null as Awaited<ReturnType<typeof getCosts>> | null, + year: now.getFullYear(), + month: now.getMonth(), + key: null as string | null, + model: null as string | null, + modelDropdownOpen: false, + keyDropdownOpen: false, + colorScheme: "light" as "light" | "dark", + }) + const onPreviousMonth = async () => { + const month = store.month === 0 ? 11 : store.month - 1 + const year = store.month === 0 ? store.year - 1 : store.year + setStore({ month, year }) + } + + const onNextMonth = async () => { + const month = store.month === 11 ? 0 : store.month + 1 + const year = store.month === 11 ? store.year + 1 : store.year + setStore({ month, year }) + } + + const onSelectModel = (model: string | null) => setStore({ model, modelDropdownOpen: false }) + + const onSelectKey = (keyID: string | null) => setStore({ key: keyID, keyDropdownOpen: false }) + + const getModels = createMemo(() => { + if (!store.data?.usage) return [] + return Array.from(new Set(store.data.usage.map((row) => row.model))).sort() + }) + + const getDates = createMemo(() => { + const daysInMonth = new Date(store.year, store.month + 1, 0).getDate() + return Array.from({ length: daysInMonth }, (_, i) => { + const date = new Date(store.year, store.month, i + 1) + return date.toISOString().split("T")[0] + }) + }) + + const getKeyName = (keyID: string | null): string => { + if (!keyID || !store.data?.keys) return i18n.t("workspace.cost.allKeys") + const found = store.data.keys.find((k) => k.id === keyID) + if (!found) return i18n.t("workspace.cost.allKeys") + return found.deleted ? `${found.displayName} ${i18n.t("workspace.cost.deletedSuffix")}` : found.displayName + } + + const formatMonthYear = () => + new Date(store.year, store.month, 1).toLocaleDateString(undefined, { month: "long", year: "numeric" }) + + const isCurrentMonth = () => store.year === now.getFullYear() && store.month === now.getMonth() + + const chartConfig = createMemo((): ChartConfiguration | null => { + const data = store.data + const dates = getDates() + if (!data?.usage?.length) return null + + store.colorScheme + const styles = getComputedStyle(document.documentElement) + const colorTextMuted = styles.getPropertyValue("--color-text-muted").trim() + const colorBorderMuted = styles.getPropertyValue("--color-border-muted").trim() + const colorBgElevated = styles.getPropertyValue("--color-bg-elevated").trim() + const colorText = styles.getPropertyValue("--color-text").trim() + const colorTextSecondary = styles.getPropertyValue("--color-text-secondary").trim() + const colorBorder = styles.getPropertyValue("--color-border").trim() + const subSuffix = ` (${i18n.t("workspace.cost.subscriptionShort")})` + const liteSuffix = " (go)" + + const dailyDataRegular = new Map<string, Map<string, number>>() + const dailyDataSub = new Map<string, Map<string, number>>() + const dailyDataLite = new Map<string, Map<string, number>>() + for (const dateKey of dates) { + dailyDataRegular.set(dateKey, new Map()) + dailyDataSub.set(dateKey, new Map()) + dailyDataLite.set(dateKey, new Map()) + } + + data.usage + .filter((row) => (store.key ? row.keyId === store.key : true)) + .forEach((row) => { + const targetMap = row.plan === "sub" ? dailyDataSub : row.plan === "lite" ? dailyDataLite : dailyDataRegular + const dayMap = targetMap.get(row.date) + if (!dayMap) return + dayMap.set(row.model, (dayMap.get(row.model) ?? 0) + row.totalCost) + }) + + const filteredModels = store.model === null ? getModels() : [store.model] + + // Create datasets: regular first, then subscription, then lite (with visual distinction via opacity) + const datasets = [ + ...filteredModels + .filter((model) => dates.some((date) => (dailyDataRegular.get(date)?.get(model) || 0) > 0)) + .map((model) => { + const color = getModelColor(model) + return { + label: model, + data: dates.map((date) => (dailyDataRegular.get(date)?.get(model) || 0) / 100_000_000), + backgroundColor: color, + hoverBackgroundColor: color, + borderWidth: 0, + stack: "usage", + } + }), + ...filteredModels + .filter((model) => dates.some((date) => (dailyDataSub.get(date)?.get(model) || 0) > 0)) + .map((model) => { + const color = getModelColor(model) + return { + label: `${model}${subSuffix}`, + data: dates.map((date) => (dailyDataSub.get(date)?.get(model) || 0) / 100_000_000), + backgroundColor: addOpacityToColor(color, 0.5), + hoverBackgroundColor: addOpacityToColor(color, 0.7), + borderWidth: 1, + borderColor: color, + stack: "subscription", + } + }), + ...filteredModels + .filter((model) => dates.some((date) => (dailyDataLite.get(date)?.get(model) || 0) > 0)) + .map((model) => { + const color = getModelColor(model) + return { + label: `${model}${liteSuffix}`, + data: dates.map((date) => (dailyDataLite.get(date)?.get(model) || 0) / 100_000_000), + backgroundColor: addOpacityToColor(color, 0.35), + hoverBackgroundColor: addOpacityToColor(color, 0.55), + borderWidth: 1, + borderColor: addOpacityToColor(color, 0.7), + borderDash: [4, 2], + stack: "lite", + } + }), + ] + + return { + type: "bar", + data: { + labels: dates.map(formatDateLabel), + datasets, + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + stacked: true, + grid: { + display: false, + }, + ticks: { + maxRotation: 0, + autoSkipPadding: 20, + color: colorTextMuted, + font: { + family: "monospace", + size: 11, + }, + }, + }, + y: { + stacked: true, + beginAtZero: true, + grid: { + color: colorBorderMuted, + }, + ticks: { + color: colorTextMuted, + font: { + family: "monospace", + size: 11, + }, + callback: (value) => { + const num = Number(value) + return num >= 1000 ? `$${(num / 1000).toFixed(1)}k` : `$${num.toFixed(0)}` + }, + }, + }, + }, + plugins: { + tooltip: { + mode: "index", + intersect: false, + backgroundColor: colorBgElevated, + titleColor: colorText, + bodyColor: colorTextSecondary, + borderColor: colorBorder, + borderWidth: 1, + padding: 12, + displayColors: true, + filter: (item) => (item.parsed.y ?? 0) > 0, + callbacks: { + label: (context) => `${context.dataset.label}: $${(context.parsed.y ?? 0).toFixed(2)}`, + }, + }, + legend: { + display: true, + position: "bottom", + labels: { + color: colorTextSecondary, + font: { + size: 12, + }, + padding: 16, + boxWidth: 16, + boxHeight: 16, + usePointStyle: false, + }, + onHover: (event, legendItem, legend) => { + const chart = legend.chart + chart.data.datasets?.forEach((dataset, i) => { + const meta = chart.getDatasetMeta(i) + const label = dataset.label || "" + const isSub = label.endsWith(subSuffix) + const isLite = label.endsWith(liteSuffix) + const model = isSub + ? label.slice(0, -subSuffix.length) + : isLite + ? label.slice(0, -liteSuffix.length) + : label + const baseColor = getModelColor(model) + const originalColor = isSub + ? addOpacityToColor(baseColor, 0.5) + : isLite + ? addOpacityToColor(baseColor, 0.35) + : baseColor + const color = i === legendItem.datasetIndex ? originalColor : addOpacityToColor(baseColor, 0.15) + meta.data.forEach((bar: any) => { + bar.options.backgroundColor = color + }) + }) + chart.update("none") + }, + onLeave: (event, legendItem, legend) => { + const chart = legend.chart + chart.data.datasets?.forEach((dataset, i) => { + const meta = chart.getDatasetMeta(i) + const label = dataset.label || "" + const isSub = label.endsWith(subSuffix) + const isLite = label.endsWith(liteSuffix) + const model = isSub + ? label.slice(0, -subSuffix.length) + : isLite + ? label.slice(0, -liteSuffix.length) + : label + const baseColor = getModelColor(model) + const color = isSub + ? addOpacityToColor(baseColor, 0.5) + : isLite + ? addOpacityToColor(baseColor, 0.35) + : baseColor + meta.data.forEach((bar: any) => { + bar.options.backgroundColor = color + }) + }) + chart.update("none") + }, + }, + }, + }, + } + }) + + createEffect(async () => { + const data = await getCosts(params.id!, store.year, store.month) + setStore({ data }) + }) + + createEffect(() => { + const config = chartConfig() + if (!config || !canvasRef) return + + if (chartInstance) chartInstance.destroy() + chartInstance = new Chart(canvasRef, config) + + onCleanup(() => chartInstance?.destroy()) + }) + + createEffect(() => { + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + setStore({ colorScheme: mediaQuery.matches ? "dark" : "light" }) + + const handleColorSchemeChange = (e: MediaQueryListEvent) => { + setStore({ colorScheme: e.matches ? "dark" : "light" }) + } + + mediaQuery.addEventListener("change", handleColorSchemeChange) + onCleanup(() => mediaQuery.removeEventListener("change", handleColorSchemeChange)) + }) + + return ( + <section class={styles.root}> + <div data-slot="section-title"> + <h2>{i18n.t("workspace.cost.title")}</h2> + <p>{i18n.t("workspace.cost.subtitle")}</p> + </div> + + <div data-slot="filter-container"> + <div data-slot="month-picker"> + <button data-slot="month-button" onClick={onPreviousMonth}> + <IconChevronLeft /> + </button> + <span data-slot="month-label">{formatMonthYear()}</span> + <button data-slot="month-button" onClick={onNextMonth} disabled={isCurrentMonth()}> + <IconChevronRight /> + </button> + </div> + <Dropdown + trigger={store.model === null ? i18n.t("workspace.cost.allModels") : store.model} + open={store.modelDropdownOpen} + onOpenChange={(open) => setStore({ modelDropdownOpen: open })} + > + <> + <button data-slot="model-item" onClick={() => onSelectModel(null)}> + <span>{i18n.t("workspace.cost.allModels")}</span> + </button> + <For each={getModels()}> + {(model) => ( + <button data-slot="model-item" onClick={() => onSelectModel(model)}> + <span>{model}</span> + </button> + )} + </For> + </> + </Dropdown> + <Dropdown + trigger={getKeyName(store.key)} + open={store.keyDropdownOpen} + onOpenChange={(open) => setStore({ keyDropdownOpen: open })} + > + <> + <button data-slot="model-item" onClick={() => onSelectKey(null)}> + <span>{i18n.t("workspace.cost.allKeys")}</span> + </button> + <For each={store.data?.keys || []}> + {(key) => ( + <button data-slot="model-item" onClick={() => onSelectKey(key.id)}> + <span> + {key.deleted ? `${key.displayName} ${i18n.t("workspace.cost.deletedSuffix")}` : key.displayName} + </span> + </button> + )} + </For> + </> + </Dropdown> + </div> + + <Show + when={chartConfig()} + fallback={ + <div data-component="empty-state"> + <p>{i18n.t("workspace.cost.empty")}</p> + </div> + } + > + <div data-slot="chart-container"> + <canvas ref={canvasRef} /> + </div> + </Show> + </section> + ) +} diff --git a/packages/console/app/src/routes/workspace/[id]/usage/index.tsx b/packages/console/app/src/routes/workspace/[id]/usage/index.tsx new file mode 100644 index 000000000..3a9c8db29 --- /dev/null +++ b/packages/console/app/src/routes/workspace/[id]/usage/index.tsx @@ -0,0 +1,21 @@ +import { Show } from "solid-js" +import { createAsync, useParams } from "@solidjs/router" +import { GraphSection } from "./graph-section" +import { UsageSection } from "./usage-section" +import { querySessionInfo } from "../../common" + +export default function () { + const params = useParams() + const user = createAsync(() => querySessionInfo(params.id!)) + + return ( + <div data-page="workspace-[id]"> + <div data-slot="sections"> + <Show when={user()?.isAdmin}> + <GraphSection /> + </Show> + <UsageSection /> + </div> + </div> + ) +} diff --git a/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css b/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css new file mode 100644 index 000000000..00232de88 --- /dev/null +++ b/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css @@ -0,0 +1,185 @@ +.root { + /* Empty state */ + [data-component="empty-state"] { + padding: var(--space-20) var(--space-6); + text-align: center; + border: 1px dashed var(--color-border); + border-radius: var(--border-radius-sm); + + p { + font-size: var(--font-size-sm); + color: var(--color-text-muted); + } + } + + /* Table container */ + [data-slot="usage-table"] { + overflow-x: auto; + } + + /* Table element */ + [data-slot="usage-table-element"] { + width: 100%; + border-collapse: collapse; + font-size: var(--font-size-sm); + + thead { + border-bottom: 1px solid var(--color-border); + } + + th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-weight: normal; + color: var(--color-text-muted); + text-transform: uppercase; + } + + td { + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border-muted); + color: var(--color-text-muted); + font-family: var(--font-mono); + + &[data-slot="usage-date"] { + color: var(--color-text-muted); + } + + &[data-slot="usage-model"] { + font-family: var(--font-sans); + color: var(--color-text-secondary); + max-width: 200px; + word-break: break-word; + } + + &[data-slot="usage-cost"] { + color: var(--color-text-muted); + } + + [data-slot="tokens-with-breakdown"] { + position: relative; + display: flex; + align-items: center; + gap: var(--space-2); + } + + [data-slot="breakdown-button"] { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: transparent; + border: none; + color: var(--color-text-muted); + cursor: pointer; + transition: color 0.15s ease; + + &:hover { + color: var(--color-text); + } + + svg { + width: 16px; + height: 16px; + } + } + + [data-slot="breakdown-popup"] { + position: absolute; + left: 0; + top: 100%; + margin-top: var(--space-2); + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + padding: var(--space-2); + z-index: 10; + min-width: 180px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + font-size: var(--font-size-xs); + + @media (prefers-color-scheme: dark) { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + } + } + } + + tbody tr:last-child td { + border-bottom: none; + } + } + + /* Pagination */ + [data-slot="pagination"] { + display: flex; + justify-content: flex-end; + gap: var(--space-2); + padding: var(--space-4) 0; + border-top: 1px solid var(--color-border-muted); + margin-top: var(--space-2); + + button { + padding: var(--space-2) var(--space-4); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + color: var(--color-text); + font-size: var(--font-size-sm); + cursor: pointer; + transition: all 0.15s ease; + + svg { + width: 16px; + height: 16px; + stroke-width: 2; + } + + &:hover:not(:disabled) { + background: var(--color-bg-tertiary); + border-color: var(--color-border-hover); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + } + } + + /* Mobile responsive */ + @media (max-width: 40rem) { + [data-slot="usage-table-element"] { + th, + td { + padding: var(--space-2) var(--space-3); + font-size: var(--font-size-xs); + } + + /* Hide Model column on mobile */ + th:nth-child(2), + td:nth-child(2) { + display: none; + } + } + } + + /* Breakdown popup content */ + [data-slot="breakdown-row"] { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-4); + padding: var(--space-1) 0; + } + + [data-slot="breakdown-label"] { + color: var(--color-text-muted); + font-size: var(--font-size-xs); + } + + [data-slot="breakdown-value"] { + color: var(--color-text); + font-weight: 500; + font-size: var(--font-size-xs); + } +} diff --git a/packages/console/app/src/routes/workspace/[id]/usage/usage-section.tsx b/packages/console/app/src/routes/workspace/[id]/usage/usage-section.tsx new file mode 100644 index 000000000..2cf8ef850 --- /dev/null +++ b/packages/console/app/src/routes/workspace/[id]/usage/usage-section.tsx @@ -0,0 +1,217 @@ +import { Billing } from "@opencode-ai/console-core/billing.js" +import { createAsync, query, useParams } from "@solidjs/router" +import { createMemo, For, Show, Switch, Match, createEffect, createSignal } from "solid-js" +import { formatDateUTC, formatDateForTable } from "../../common" +import { withActor } from "~/context/auth.withActor" +import { IconChevronLeft, IconChevronRight, IconBreakdown } from "~/component/icon" +import styles from "./usage-section.module.css" +import { createStore } from "solid-js/store" +import { useI18n } from "~/context/i18n" + +const PAGE_SIZE = 50 + +async function getUsageInfo(workspaceID: string, page: number) { + "use server" + return withActor(async () => { + return await Billing.usages(page, PAGE_SIZE) + }, workspaceID) +} + +const queryUsageInfo = query(getUsageInfo, "usage.list") + +export function UsageSection() { + const params = useParams() + const i18n = useI18n() + const usage = createAsync(() => queryUsageInfo(params.id!, 0)) + const [store, setStore] = createStore({ page: 0, usage: [] as Awaited<ReturnType<typeof getUsageInfo>> }) + const [openBreakdownId, setOpenBreakdownId] = createSignal<string | null>(null) + + createEffect(() => { + setStore({ usage: usage() }) + }, [usage]) + + createEffect(() => { + if (!openBreakdownId()) return + + const handleClickOutside = (e: MouseEvent) => { + const target = e.target as HTMLElement + if (!target.closest('[data-slot="tokens-with-breakdown"]')) { + setOpenBreakdownId(null) + } + } + + document.addEventListener("click", handleClickOutside) + return () => document.removeEventListener("click", handleClickOutside) + }) + + const hasResults = createMemo(() => store.usage && store.usage.length > 0) + const canGoPrev = createMemo(() => store.page > 0) + const canGoNext = createMemo(() => store.usage && store.usage.length === PAGE_SIZE) + + const calculateTotalInputTokens = (u: Awaited<ReturnType<typeof getUsageInfo>>[0]) => { + return u.inputTokens + (u.cacheReadTokens ?? 0) + (u.cacheWrite5mTokens ?? 0) + (u.cacheWrite1hTokens ?? 0) + } + + const calculateTotalOutputTokens = (u: Awaited<ReturnType<typeof getUsageInfo>>[0]) => { + return u.outputTokens + (u.reasoningTokens ?? 0) + } + + const goPrev = async () => { + const usage = await getUsageInfo(params.id!, store.page - 1) + setStore({ + page: store.page - 1, + usage, + }) + } + const goNext = async () => { + const usage = await getUsageInfo(params.id!, store.page + 1) + setStore({ + page: store.page + 1, + usage, + }) + } + + return ( + <section class={styles.root}> + <div data-slot="section-title"> + <h2>{i18n.t("workspace.usage.title")}</h2> + <p>{i18n.t("workspace.usage.subtitle")}</p> + </div> + <div data-slot="usage-table"> + <Show + when={hasResults()} + fallback={ + <div data-component="empty-state"> + <p>{i18n.t("workspace.usage.empty")}</p> + </div> + } + > + <table data-slot="usage-table-element"> + <thead> + <tr> + <th>{i18n.t("workspace.usage.table.date")}</th> + <th>{i18n.t("workspace.usage.table.model")}</th> + <th>{i18n.t("workspace.usage.table.input")}</th> + <th>{i18n.t("workspace.usage.table.output")}</th> + <th>{i18n.t("workspace.usage.table.cost")}</th> + <th>{i18n.t("workspace.usage.table.session")}</th> + </tr> + </thead> + <tbody> + <For each={store.usage}> + {(usage, index) => { + const date = createMemo(() => new Date(usage.timeCreated)) + const totalInputTokens = createMemo(() => calculateTotalInputTokens(usage)) + const totalOutputTokens = createMemo(() => calculateTotalOutputTokens(usage)) + const inputBreakdownId = `input-breakdown-${index()}` + const outputBreakdownId = `output-breakdown-${index()}` + const isInputOpen = createMemo(() => openBreakdownId() === inputBreakdownId) + const isOutputOpen = createMemo(() => openBreakdownId() === outputBreakdownId) + const isClaude = usage.model.toLowerCase().includes("claude") + return ( + <tr> + <td data-slot="usage-date" title={formatDateUTC(date())}> + {formatDateForTable(date())} + </td> + <td data-slot="usage-model">{usage.model}</td> + <td data-slot="usage-tokens"> + <div data-slot="tokens-with-breakdown" onClick={(e) => e.stopPropagation()}> + <button + data-slot="breakdown-button" + onClick={(e) => { + e.stopPropagation() + setOpenBreakdownId(isInputOpen() ? null : inputBreakdownId) + }} + > + <IconBreakdown /> + </button> + <span onClick={() => setOpenBreakdownId(null)}>{totalInputTokens()}</span> + <Show when={isInputOpen()}> + <div data-slot="breakdown-popup" onClick={(e) => e.stopPropagation()}> + <div data-slot="breakdown-row"> + <span data-slot="breakdown-label">{i18n.t("workspace.usage.breakdown.input")}</span> + <span data-slot="breakdown-value">{usage.inputTokens}</span> + </div> + <div data-slot="breakdown-row"> + <span data-slot="breakdown-label">{i18n.t("workspace.usage.breakdown.cacheRead")}</span> + <span data-slot="breakdown-value">{usage.cacheReadTokens ?? 0}</span> + </div> + <Show when={isClaude}> + <div data-slot="breakdown-row"> + <span data-slot="breakdown-label"> + {i18n.t("workspace.usage.breakdown.cacheWrite")} + </span> + <span data-slot="breakdown-value">{usage.cacheWrite5mTokens ?? 0}</span> + </div> + </Show> + </div> + </Show> + </div> + </td> + <td data-slot="usage-tokens"> + <div data-slot="tokens-with-breakdown" onClick={(e) => e.stopPropagation()}> + <button + data-slot="breakdown-button" + onClick={(e) => { + e.stopPropagation() + setOpenBreakdownId(isOutputOpen() ? null : outputBreakdownId) + }} + > + <IconBreakdown /> + </button> + <span onClick={() => setOpenBreakdownId(null)}>{totalOutputTokens()}</span> + <Show when={isOutputOpen()}> + <div data-slot="breakdown-popup" onClick={(e) => e.stopPropagation()}> + <div data-slot="breakdown-row"> + <span data-slot="breakdown-label">{i18n.t("workspace.usage.breakdown.output")}</span> + <span data-slot="breakdown-value">{usage.outputTokens}</span> + </div> + <div data-slot="breakdown-row"> + <span data-slot="breakdown-label">{i18n.t("workspace.usage.breakdown.reasoning")}</span> + <span data-slot="breakdown-value">{usage.reasoningTokens ?? 0}</span> + </div> + </div> + </Show> + </div> + </td> + <td data-slot="usage-cost"> + <Switch fallback={<>${((usage.cost ?? 0) / 100000000).toFixed(4)}</>}> + <Match when={usage.enrichment?.plan === "sub"}> + {i18n.t("workspace.usage.subscription", { + amount: ((usage.cost ?? 0) / 100000000).toFixed(4), + })} + </Match> + <Match when={usage.enrichment?.plan === "lite"}> + {i18n.t("workspace.usage.lite", { + amount: ((usage.cost ?? 0) / 100000000).toFixed(4), + })} + </Match> + <Match when={usage.enrichment?.plan === "byok"}> + {i18n.t("workspace.usage.byok", { + amount: ((usage.cost ?? 0) / 100000000).toFixed(4), + })} + </Match> + </Switch> + </td> + <td data-slot="usage-session">{usage.sessionID?.slice(-8) ?? "-"}</td> + </tr> + ) + }} + </For> + </tbody> + </table> + <Show when={canGoPrev() || canGoNext()}> + <div data-slot="pagination"> + <button disabled={!canGoPrev()} onClick={goPrev}> + <IconChevronLeft /> + </button> + <button disabled={!canGoNext()} onClick={goNext}> + <IconChevronRight /> + </button> + </div> + </Show> + </Show> + </div> + </section> + ) +} |